<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="pageInfo.pageList"
      highlight-current-row
      v-loading="listLoading"
      @selection-change="selsChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="60"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="sn" width="180" sortable>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDel(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            type="success"
            size="small"
            @click="handlePermission(scope.$index, scope.row)"
            >权限管理</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handlesetMenu(scope.$index, scope.row)"
            >设置菜单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button
        type="danger"
        @click="batchRemove"
        :disabled="this.sels.length === 0"
        >批量删除</el-button
      >
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="query.pageSize"
        :current-page="query.currentPage"
        :total="pageInfo.count"
        style="float: right"
      >
      </el-pagination>
    </el-col>

    <!--新增/编辑界面-->
    <el-dialog
      title="新增/编辑"
      :visible.sync="addFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        label-width="80px"
        :rules="addFormRules"
        ref="addForm"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="标识" prop="sn">
          <el-input v-model="addForm.sn" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="addSubmit"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="设置权限"
      :visible.sync="setPermissionVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="rolePermission" label-width="80px" ref="addForm">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div
          class="checkbox-table"
          v-for="(p, indexkey) in permissionTree"
          :key="p.sn"
        >
          <template>
            <el-checkbox
              class="check1"
              style="font-weight: 600; margin-bottom: 15px"
              v-model="rolePermission.permissionSns"
              :label="p.sn"
              @change="handleCheck(1, indexkey)"
            >
              {{ p.name }}
            </el-checkbox>
            <div style="margin-bottom: 20px">
              <div
                v-for="c in p.children"
                class="line-check"
                :key="c.sn"
                style="
                  display: inline-block;
                  margin-left: 20px;
                  margin-bottom: 20px;
                "
              >
                <el-checkbox
                  class="check2"
                  @change="handleCheck(2, indexkey)"
                  v-model="rolePermission.permissionSns"
                  :label="c.sn"
                >
                  {{ c.name }}
                </el-checkbox>
              </div>
            </div>
          </template>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="setPermissionVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveRolePermission"
          :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="设置菜单"
      :visible.sync="setMenuVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="roleMenu" label-width="80px" ref="addForm">
        <el-checkbox
          :indeterminate="isMenuterminate"
          v-model="checkAllMenu"
          @change="handleMenuCheckAllChange"
          >全选</el-checkbox
        >
        <div
          class="checkbox-table"
          v-for="(p, indexkey) in menuTree"
          :key="p.id"
        >
          <template>
            <el-checkbox
              class="check1"
              style="font-weight: 600; margin-bottom: 15px"
              v-model="roleMenu.allMenu"
              :label="p.id"
              @change="handleCheckMenu(1, indexkey)"
            >
              {{ p.name }}
            </el-checkbox>
            <div style="margin-bottom: 20px">
              <div
                v-for="c in p.children"
                class="line-check"
                :key="c.id"
              >
                <el-checkbox
                  class="check2"
                  @change="handleCheckMenu(2, indexkey)"
                  v-model="roleMenu.allMenu"
                  :label="c.id"
                >
                  {{ c.name }}
                </el-checkbox>
              </div>
            </div>
          </template>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="setMenuVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveMenu" :loading="addLoading"
          >提交</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import {
  getUserListPage,
  removeUser,
  batchRemoveUser,
  addUser,
} from '../../api/api'

export default {
  data() {
    return {
      filters: {
        name: '',
      },
      users: [],
      total: 0,
      page: 1,
      listLoading: false,
      sels: [], //列表选中列

      addFormVisible: false, //新增界面是否显示
      addLoading: false,
      addFormRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sn: [{ required: true, message: '标识必填', trigger: 'blur' }],
      },
      //新增界面数据
      addForm: {
        id: null,
        name: '',
        sn: '',
      },
      query: {
        currentPage: 1,
        pageSize: 5,
        keyword: '',
      },
      pageInfo: {
        count: 0,
        pageList: [],
      },

      //   定义设置权限相关的值
      setPermissionVisible: false,
      rolePermission: {
        roleId: null,
        permissionSns: [], // 存放的是当前被勾选中的权限,包括一级权限和二级权限
      },
      permissionTree: [], // 存放权限树,用来做弹框的权限树展示
      isIndeterminate: false, // 用来控制全选框的状态
      checkAll: false, // 控制全选框是否勾选中
      allPermissionSns: [], // 用来装所有权限的sn 怎么拿到?方式一:/permission/tree 循环拿到的数据,封装allPermissionSns 方式二:重新写个接口,只用来获取所有的sn

      // 定义设置菜单相关值
      setMenuVisible: false,
      isMenuterminate: false, //菜单全选不确定状态
      checkAllMenu: false, //全选是否选中
      roleMenu: {
        id: null,
        allMenu: [], //存放选中的菜单
      },
      menuTree: [], //菜单树，用于展示
      menuAll: [], // 所有菜单id
    }
  },
  methods: {
    // 点击设置菜单
    handlesetMenu(index, row) {
      this.setMenuVisible = true
      // 获取所有菜单
      this.getAllMenuTree()
      // 获取所有的菜单id
      this.getAllMenuId()
      this.roleMenu.id = row.id
      // 获取角色已有菜单
      this.getRoleMenuById(row.id)
    },
    getAllMenuTree() {
      this.$http.get('/menu/tree').then((res) => {
        res = res.data
        if (res.success) {
          console.log("所有菜单",res)
          this.menuTree = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getAllMenuId() {
      this.$http.get('/menu/menuid').then((res) => {
        res = res.data
        if (res.success) {
          this.menuAll = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getRoleMenuById(id) {
      this.$http.get('/role/getMenuId/' + id).then((res) => {
        res = res.data
        if (res.success) {
          this.roleMenu.allMenu = res.data
          // 获取已选中的长度
          let checkedCount = this.roleMenu.allMenu.length
          // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
          this.checkAllMenu = checkedCount === this.menuAll.length
          // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
          this.isMenuterminate =
            checkedCount > 0 && checkedCount < this.menuAll.length
            console.log("全选状态",this.isMenuterminate);
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 提交保存角色菜单id
    saveMenu() {
      console.log('？？', this.roleMenu)
      this.$http.post('/role/menu', this.roleMenu).then((res) => {
        res = res.data
        if (res.success) {
          this.$message.success('设置成功')
          this.setMenuVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    saveRolePermission() {
      this.$http
        .post('/role/permission', this.rolePermission)
        .then((result) => {
          result = result.data
          if (result.success) {
            this.$message({ message: '设置成功!', type: 'success' })
            // 关闭弹框
            this.setPermissionVisible = false
          } else {
            this.$message({ message: result.message, type: 'error' })
          }
        })
    },
    // 点击菜单全选触发
    handleMenuCheckAllChange(val) {
      console.log('全选', val)
      this.roleMenu.allMenu = val ? this.menuAll : []
      this.isMenuterminate = false
    },
    // 选择处理
    handleCheckMenu(type, a = 0) {
      let indexOf = this.roleMenu.allMenu.indexOf(this.menuTree[a].id)
      if (type == 2) {
        // 二级菜单点击
        let index = 0
        this.menuTree[a].children.map((item) => {
          if (this.roleMenu.allMenu.indexOf(item.id) > -1) {
            index += 1
          }
        })
        if (index > 0) {
          // 已选中的菜单列表中，包含当前一级菜单下的某个子菜单
          if (indexOf < 0) {
            // 已选中的菜单列表中，没有当前一级菜单，则添加到已选中的菜单列表中
            this.roleMenu.allMenu.push(this.menuTree[a].id)
          }
        } else {
          // // 已选中的菜单列表中，不包含当前一级菜单下的某个子菜单
          if (indexOf > -1) {
            // 已选中的菜单列表中，有当前一级菜单，则删除
            this.roleMenu.allMenu.splice(indexOf, 1)
          }
        }
      } else {
        // 点击一级菜单
        if (indexOf > -1) {
          // 已选中的菜单中，包含当前一级菜单，则将该一级菜单下所有的子菜单选中
          this.menuTree[a].children.map((item) => {
            if (this.roleMenu.allMenu.findIndex((n) => n == item.sn) < 0) {
              this.roleMenu.allMenu.push(item.id)
            }
          })
        } else {
          // 已选中的菜单中，不包含当前一级权限，则将该一级权限下所有的子权限移除
          this.menuTree[a].children.map((item) => {
            if (this.roleMenu.allMenu.findIndex((n) => n == item.id) > -1) {
              this.roleMenu.allMenu.splice(
                this.roleMenu.allMenu.findIndex((n) => n == item.id),
                1
              )
            }
          })
        }
      }
      // 获取已选中的长度
      let checkedCount = this.roleMenu.allMenu.length
      // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
      this.checkAllMenu = checkedCount === this.menuAll.length
      // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
      this.isMenuterminate =
        checkedCount > 0 && checkedCount < this.menuAll.length
    },

    // 点击"全选"复选框时,触发的方法
    handleCheckAllChange(val) {
      // val:就是当前这个复选框它有没有被选中  true:选中(就是说要将下面的复选框都全部选中)  false:取消选中
      // 如果val=true,就要将所有权限的sn赋值给它们双向绑定的数组,通过双向绑定原则,就可以实现所有的复选框被选中
      this.rolePermission.permissionSns = val ? this.allPermissionSns : []
      // 取消全选框的那个不确定状态
      this.isIndeterminate = false
    },
    // 处理选择事件  type 1:一级权限2:二级权限   a：一级权限的索引位置
    handleCheck(type, a = 0) {
      // 在已选中的权限列表中，查看是否存在一级权限 >-1 存在  <0 不存在
      let indexOf = this.rolePermission.permissionSns.indexOf(
        this.permissionTree[a].sn
      )
      if (type == 2) {
        // 二级权限点击
        let index = 0 //
        this.permissionTree[a].children.map((item) => {
          // 已选中的权限列表中，是否包含当前一级权限下的某个子权限
          if (this.rolePermission.permissionSns.indexOf(item.sn) > -1) {
            index += 1
          }
        })
        if (index > 0) {
          // 已选中的权限列表中，包含当前一级权限下的某个子权限
          if (indexOf < 0) {
            // 已选中的权限列表中，没有当前一级权限，则添加到已选中的权限列表中
            this.rolePermission.permissionSns.push(this.permissionTree[a].sn)
          }
        } else {
          // // 已选中的权限列表中，不包含当前一级权限下的某个子权限
          if (indexOf > -1) {
            // 已选中的权限列表中，有当前一级权限，则删除
            this.rolePermission.permissionSns.splice(indexOf, 1)
          }
        }
      } else {
        // 一级菜单点击
        if (indexOf > -1) {
          // 已选中的权限中，包含当前一级权限，则将该一级权限下所有的子权限选中
          this.permissionTree[a].children.map((item) => {
            if (
              this.rolePermission.permissionSns.findIndex((n) => n == item.sn) <
              0
            ) {
              this.rolePermission.permissionSns.push(item.sn)
            }
          })
        } else {
          // 已选中的权限中，不包含当前一级权限，则将该一级权限下所有的子权限移除
          this.permissionTree[a].children.map((item) => {
            if (
              this.rolePermission.permissionSns.findIndex((n) => n == item.sn) >
              -1
            ) {
              this.rolePermission.permissionSns.splice(
                this.rolePermission.permissionSns.findIndex(
                  (n) => n == item.sn
                ),
                1
              )
            }
          })
        }
      }
      // 获取已选中的长度
      let checkedCount = this.rolePermission.permissionSns.length
      // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
      this.checkAll = checkedCount === this.allPermissionSns.length
      // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.allPermissionSns.length
    },
    // 点击"设置权限"按钮时,触发的方法
    handlePermission(index, row) {
      this.setPermissionVisible = true
      // 调用后端的权限树接口,给permissionTree赋值,用来做权限树展示
      this.getPermissionTree()
      // 获取所有的权限sn
      this.getAllPermissionSn()
      this.rolePermission.roleId = row.id
      this.getSnByRoleId(row.id)
    },
    getAllPermissionSn() {
      this.$http.get('/permission/sns').then((result) => {
        result = result.data
        if (result.success) {
          // result.resultObj 后端返回的所有的权限sn
          this.allPermissionSns = result.data
        }
      })
    },
    getPermissionTree() {
      this.$http.get('/permission/tree').then((result) => {
        result = result.data
        if (result.success) {
          // 查询成功,将后端返回的数据赋值给this.permissionTree
          this.permissionTree = result.data
        }
      })
    },
    getSnByRoleId(roleId) {
      this.$http.get('/role/permissionsn/' + roleId).then((res) => {
        res = res.data
        if (res.success) {
          this.rolePermission.permissionSns = res.data
          // 获取已选中的长度
          let checkedCount = this.rolePermission.permissionSns.length
          // 如果已选中的长度==所有权限的长度，则checkAll=true，也就是全选框被选中
          this.checkAll = checkedCount === this.allPermissionSns.length
          // 如果已选中的长度>0并且已选中的长度<所有权限的长度，则全选框是一个横杠
          this.isIndeterminate =
            checkedCount > 0 && checkedCount < this.allPermissionSns.length
        } else {
          this.$message.error(res.message)
        }
      })
    },

    search() {
      this.query.currentPage = 1
      this.getRoles()
    },
    handleSizeChange(val) {
      console.log('页', val)
    },
    //性别显示转换
    formatSex: function (row, column) {
      return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'
    },
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getRoles()
    },
    //获取用户列表
    getRoles() {
      this.listLoading = true
      this.$http.post('/role', this.query).then((res) => {
        res = res.data
        if (res.success) {
          this.listLoading = false
          this.pageInfo = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.$http.delete('/role/' + row.id).then((res) => {
            res = res.data
            if (res.success) {
              this.$message.success('删除成功')
              this.search()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {})
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.addFormVisible = true
      console.log('编辑数据', row)
      this.addForm = Object.assign({}, row)
    },
    //显示新增界面
    handleAdd: function () {
      this.addFormVisible = true
      this.addForm = {
        id: null,
        name: '',
        sn: '',
      }
    },
    //新增
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true
            this.$http.put('/role', this.addForm).then((res) => {
              res = res.data
              if (res.success) {
                this.$message.success('保存成功')
                // 关闭加载
                this.addLoading = false
                // 关闭弹窗
                this.addFormVisible = false
                this.getRoles()
              } else {
                this.$message.error(res.message)
              }
            })
          })
        }
      })
    },
    selsChange: function (sels) {
      this.sels = sels
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map((item) => item.id)
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.$http.patch('/role', ids).then((res) => {
            res = res.data
            if (res.success) {
              this.$message.success('批量删除成功')
              this.search()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {})
    },
  },
  mounted() {
    this.getRoles()
  },
}
</script>

<style scoped>
.line-check {
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 20px;
}
</style>
